{% extends "base.html" %} {% block title %}健康计划推荐 - 运动健康管理系统{%
endblock %} {% block content %}
<div class="container my-5">
  <div class="row">
    <div class="col-12">
      <div class="card mb-4">
        <div class="card-header bg-primary text-white">
          <h4 class="mb-0">个性化健康计划推荐</h4>
        </div>
        <div class="card-body">
          <div id="userInfoSection" class="mb-4">
            <h5 class="border-bottom pb-2">您的基本信息</h5>
            <div class="row">
              <div class="col-md-6">
                <p>
                  <strong>用户名：</strong>
                  <span id="username">{{ current_user.username }}</span>
                </p>
                <p>
                  <strong>性别：</strong>
                  <span id="gender">{{ current_user.gender }}</span>
                </p>
                <p>
                  <strong>年龄：</strong>
                  <span id="age">{{ current_user.age }}</span> 岁
                </p>
              </div>
              <div class="col-md-6">
                <p>
                  <strong>身高：</strong>
                  <span id="height">{{ current_user.height }}</span> 厘米
                </p>
                <p>
                  <strong>体重：</strong>
                  <span id="weight">{{ current_user.weight }}</span> 公斤
                </p>
                <p>
                  <strong>健康目标：</strong>
                  <span id="goal">{{ current_user.goal }}</span>
                </p>
              </div>
            </div>
            <div class="alert alert-info" id="infoAlert">
              <p class="mb-0">
                根据您的信息，我们将为您生成个性化的健康计划推荐。
              </p>
            </div>
            <div class="text-center">
              <button id="generatePlanBtn" class="btn btn-primary">
                生成健康计划
              </button>
            </div>
          </div>

          <div id="healthStatsSection" class="mb-4 d-none">
            <h5 class="border-bottom pb-2">健康数据分析</h5>
            <div class="row">
              <div class="col-md-4">
                <div class="card bg-light">
                  <div class="card-body text-center">
                    <h6 class="card-title">BMI指数</h6>
                    <h3 id="bmiValue" class="text-primary">-</h3>
                    <p id="bmiCategory" class="mb-0">-</p>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card bg-light">
                  <div class="card-body text-center">
                    <h6 class="card-title">基础代谢率(BMR)</h6>
                    <h3 id="bmrValue" class="text-primary">-</h3>
                    <p class="mb-0">卡路里/天</p>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card bg-light">
                  <div class="card-body text-center">
                    <h6 class="card-title">每日推荐热量</h6>
                    <h3 id="caloriesValue" class="text-primary">-</h3>
                    <p class="mb-0">卡路里/天</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="alert alert-info mt-3" id="bmiAdvice">
              <!-- BMI建议在这里显示 -->
            </div>
          </div>

          <div id="exercisePlansSection" class="mb-4 d-none">
            <h5 class="border-bottom pb-2">推荐运动计划</h5>
            <div id="exercisePlansContainer" class="row">
              <!-- 运动计划在这里动态生成 -->
            </div>
          </div>

          <div id="dietPlansSection" class="d-none">
            <h5 class="border-bottom pb-2">推荐饮食计划</h5>
            <div id="dietPlansContainer" class="row">
              <!-- 饮食计划在这里动态生成 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block extra_js %}
<script src="{{ url_for('static', filename='scripts/health-plan-recommender.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/health-plan-recommendation.js') }}"></script>
{% endblock %}
